<title>个人信息 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">绑定邮箱</div></header>
                <div class="card-body row justify-content-center">
                    <div class="col-md-5">
                        <form id="example-from" class="site-form">
                            <div class="form-group mb-3">
                                <label class="form-label" for="email">邮箱地址</label>
                                <input type="text" class="form-control" name="email" id="email" placeholder="输入您的邮箱地址">
                            </div>
                            <div class="input-group form-group mb-3">
                                <input type="text" name="code" class="form-control" placeholder="邮箱验证码" aria-label="邮箱验证码" aria-describedby="send-code" maxlength="6">
                                {if condition = "$countDown > 0"}
                                    <button type="button" id="send-code" class="btn btn-primary">{$countDown}秒后重新发送</button>
                                {else/}
                                    <button type="button" id="send-code" class="btn btn-primary">发送验证码</button>
                                {/if}
                            </div>
                            <button type="submit" class="btn btn-primary">绑定邮箱</button>
                            <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--加载动画插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>
<script>
    let countDownSec = 60;
    let countDown = null;
    $(function (){
        let oldCountDownSec = parseInt("{$countDown}");
        if(oldCountDownSec > 0){    //如果点击过发送，还在倒计时中，却刷新了页面，继续计时
            countDownSec = oldCountDownSec;
            countDownSec--;
            countDown = setInterval(() => {
                if (countDownSec < 0) {
                    clearInterval(countDown);
                    countDown = null;
                    countDownSec = 60;
                    $('#send-code').text('发送验证码');
                }else{
                    $('#send-code').text(countDownSec + '秒后重新发送');
                }
                countDownSec--;
            }, 1000);
        }
        $('#send-code').click(function (){
            if(countDown === null) {
                let email = $('#email').val();
                if(email === ''){
                    showNotifyCompilation('邮箱不能为空哦~');
                    return;
                }
                post("{:url('/admin/admin/send')}", {email: email}).success((res) => {
                    if(res.code === 200){
                        $('#send-code').text(countDownSec + '秒后重新发送');
                        countDownSec--;
                        countDown = setInterval(() => {
                            if (countDownSec < 0) {
                                clearInterval(countDown);
                                countDown = null;
                                countDownSec = 60;
                                $('#send-code').text('发送验证码');
                            }else {
                                $('#send-code').text(countDownSec + '秒后重新发送');
                            }
                            countDownSec--;
                        }, 1000);
                    }
                }).error();
            }
        });
        let $exampleFrom = $('#example-from');
        $exampleFrom.submit(function(){
            event.preventDefault();
        });
        $exampleFrom.validate({
            ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
            focusInvalid: false,  // 禁用无效元素的聚焦
            rules: {
                'email': {
                    required: true,
                },
                'code': {
                    required: true,
                    digits: true,
                    minlength: 6,
                    maxlength: 6
                }
            },
            errorPlacement: function errorPlacement(error, element) {
                var $parent = $(element).parents('.form-group');
                if ($parent.find('.invalid-feedback').length) {
                    return;
                }
                $(element).addClass('is-invalid');
                $parent.append(error.addClass('invalid-feedback'));
            },
            highlight: function(element) {
                var $el = $(element);
                if ($el.hasClass('js-tags-input')) {
                    $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
                }
            },
            unhighlight: function(element) {
                $(element).next('.tagsinput').removeClass('is-invalid');
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                let l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/admin/bind')}", $(form).serialize()).success(res => {
                    setTimeout(() => {
                        l.destroy();
                    }, 500)
                    res.code === 200 && setTimeout(() => {
                        top.location.reload();
                    }, 500)
                }).error();
            }
        });
    });
</script>